<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<style>
  .red{
      background-color: red;

  }
   
  .yellow{
      background-color: yellow;
  }

</style>
<body>
    
  <div id="app">
   {{message}}
   <button @click="handleClick">请点我哦</button>
   <div :class="isActive?'red':'yellow'">点击我变颜色哦</div>
   <input type="text" v-model="userAndPassword.userName">
   <input type="text" v-model="userAndPassword.password">
   <input type="text" placeholder="请输入内容" v-model="mytext"> <button @click="handleAdd"> 提交</button>
   <ul>
       <li v-for="(item,index) in dataList">
           {{item}},{{index}}
       </li>
   </ul>
    <!-- 条件渲染 -->
  <div v-if="isActive">条件渲染if</div>
  <div v-else="isActive">条件渲染else</div>

  </div>


</body>

<script>

 var vm=new Vue({
  el:"#app",
  data:{
    message:"这是我的第一个vue",
    isActive:true,
    dataList:["1","2","3","4"],
    userAndPassword:{
        userName:"",
        password:""
    },
    mytext:"mytext"
  },
  methods:{
    handleClick(){
        vm.$destroy();
        this.isActive=false;

    },
    handleAdd(){
        this.dataList.push(this.mytext);
    }


  },
  beforeCreate(){
    //alert("创建之前");

  },
  created(){
  //  alert("创建之后");
  },
  beforeMount(){
    //alert("挂载之前");
  },
  mounted(){
   // alert("挂载之后");
  },
  updated(){
   // alert("更细之后");
  },
  beforeUpdate(){
   // alert("更细之前");
  },
  destroyed(){
        alert("销毁之后");
  },
  beforeDestroy(){
    alert("销毁之钱");
  }


 });

</script>
</html>